<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本小程序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
        }
        
        .header {
            background: #007aff;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
        
        .tab-bar {
            display: flex;
            background: white;
            border-bottom: 1px solid #e0e0e0;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .tab-item {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }
        
        .tab-item.active {
            color: #007aff;
            border-bottom-color: #007aff;
        }
        
        .content {
            padding: 20px;
        }
        
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #007aff;
            color: white;
        }
        
        .btn-primary:hover {
            background: #0056b3;
        }
        
        .btn-danger {
            background: #ff3b30;
            color: white;
            padding: 8px 16px;
            font-size: 14px;
        }
        
        .btn-small {
            padding: 8px 16px;
            font-size: 14px;
        }
        
        .todo-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            gap: 15px;
        }
        
        .todo-item:last-child {
            border-bottom: none;
        }
        
        .todo-checkbox {
            width: 24px;
            height: 24px;
            border: 2px solid #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }
        
        .todo-checkbox.checked {
            background: #4cd964;
            border-color: #4cd964;
            color: white;
        }
        
        .todo-text {
            flex: 1;
            font-size: 16px;
        }
        
        .todo-text.completed {
            text-decoration: line-through;
            color: #999;
        }
        
        .todo-time {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        
        .note-item {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        
        .note-item:hover {
            background: #f8f8f8;
        }
        
        .note-item:last-child {
            border-bottom: none;
        }
        
        .note-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .note-preview {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        
        .note-time {
            font-size: 12px;
            color: #999;
        }
        
        .search-input {
            width: 100%;
            margin-bottom: 20px;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .stat-item {
            flex: 1;
        }
        
        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: #007aff;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        
        .empty {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        
        .empty-icon {
            font-size: 64px;
            margin-bottom: 20px;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 30px;
            width: 90%;
            max-width: 500px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .modal-body {
            margin-bottom: 30px;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }
        
        .textarea {
            width: 100%;
            min-height: 150px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            font-family: inherit;
            resize: vertical;
        }
        
        .char-count {
            font-size: 12px;
            color: #999;
            text-align: right;
            margin-top: 5px;
        }
        
        .note-content-full {
            white-space: pre-wrap;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .note-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        @media (max-width: 480px) {
            .container {
                margin: 0;
            }
            
            .content {
                padding: 15px;
            }
            
            .modal-content {
                width: 95%;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">记事本小程序</div>
        
        <div class="tab-bar">
            <div class="tab-item active" data-tab="todo">待办事项</div>
            <div class="tab-item" data-tab="notepad">记事本</div>
        </div>
        
        <div class="content">
            <!-- 待办事项页面 -->
            <div class="page active" id="todo-page">
                <div class="card">
                    <div class="stats">
                        <div class="stat-item">
                            <div class="stat-number" id="pending-count">0</div>
                            <div class="stat-label">待完成</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number" id="completed-count">0</div>
                            <div class="stat-label">已完成</div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="input-group">
                        <input type="text" class="input" id="todo-input" placeholder="请输入待办事项...">
                        <button class="btn btn-primary" onclick="addTodo()">添加</button>
                    </div>
                </div>
                
                <div class="card">
                    <h3>待完成 (<span id="pending-total">0</span>)</h3>
                    <div id="pending-list">
                        <div class="empty">
                            <div class="empty-icon">📝</div>
                            <div>暂无待办事项</div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <h3>已完成 (<span id="completed-total">0</span>)</h3>
                    <div id="completed-list">
                        <div class="empty">
                            <div class="empty-icon">✅</div>
                            <div>暂无已完成事项</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 记事本页面 -->
            <div class="page" id="notepad-page">
                <div class="card">
                    <input type="text" class="input search-input" id="search-input" placeholder="搜索记事本..." oninput="searchNotes()">
                    <button class="btn btn-primary" onclick="showAddNoteModal()">新建笔记</button>
                </div>
                
                <div class="card">
                    <h3>我的笔记 (<span id="notes-total">0</span>)</h3>
                    <div id="notes-list">
                        <div class="empty">
                            <div class="empty-icon">📓</div>
                            <div>还没有笔记，点击上方按钮创建第一个笔记吧</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 添加/编辑笔记模态框 -->
    <div class="modal" id="note-modal">
        <div class="modal-content">
            <div class="modal-header" id="modal-title">新建笔记</div>
            <div class="modal-body">
                <input type="text" class="input" id="note-title" placeholder="请输入标题..." maxlength="50">
                <textarea class="textarea" id="note-content" placeholder="请输入内容..." maxlength="2000"></textarea>
                <div class="char-count">内容字数: <span id="char-count">0</span>/2000</div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeNoteModal()">取消</button>
                <button class="btn btn-primary" onclick="saveNote()">保存</button>
            </div>
        </div>
    </div>
    
    <!-- 查看笔记模态框 -->
    <div class="modal" id="view-modal">
        <div class="modal-content">
            <div class="modal-header" id="view-title">笔记标题</div>
            <div class="modal-body">
                <div class="note-content-full" id="view-content"></div>
                <div class="note-time">
                    <div>创建时间: <span id="view-create-time"></span></div>
                    <div id="view-update-time" style="display:none;">更新时间: <span></span></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closeViewModal()">关闭</button>
                <button class="btn btn-primary" onclick="editCurrentNote()">编辑</button>
            </div>
        </div>
    </div>
    
    <script>
        // 数据存储
        let todos = [
            { id: 1, text: '完成项目报告', completed: false, createTime: '2024-01-15 10:30' },
            { id: 2, text: '购买生活用品', completed: true, createTime: '2024-01-14 15:20' },
            { id: 3, text: '预约医生检查', completed: false, createTime: '2024-01-13 09:15' }
        ];
        
        let notes = [
            { 
                id: 1, 
                title: '会议记录', 
                content: '今天的团队会议讨论了项目进度，确定了下周的工作重点。\n1. 前端界面优化\n2. 后端接口完善\n3. 测试用例编写', 
                createTime: '2024-01-15 14:30',
                updateTime: '2024-01-15 14:30'
            },
            { 
                id: 2, 
                title: '学习笔记', 
                content: 'Vue.js 组件通信方式：\n- props 父传子\n- $emit 子传父\n- provide/inject 跨层级\n- Vuex 状态管理', 
                createTime: '2024-01-14 16:45',
                updateTime: '2024-01-14 16:45'
            }
        ];
        
        let currentNote = null;
        let editingNote = false;
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            renderTodos();
            renderNotes();
            
            // 标签页切换
            document.querySelectorAll('.tab-item').forEach(tab => {
                tab.addEventListener('click', function() {
                    const targetTab = this.dataset.tab;
                    switchTab(targetTab);
                });
            });
            
            // 待办事项输入框回车事件
            document.getElementById('todo-input').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    addTodo();
                }
            });
            
            // 笔记内容输入计数
            document.getElementById('note-content').addEventListener('input', function() {
                document.getElementById('char-count').textContent = this.value.length;
            });
        });
        
        // 标签页切换
        function switchTab(tabName) {
            // 更新标签状态
            document.querySelectorAll('.tab-item').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
            
            // 更新页面显示
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(`${tabName}-page`).classList.add('active');
        }
        
        // 待办事项相关函数
        function addTodo() {
            const input = document.getElementById('todo-input');
            const text = input.value.trim();
            
            if (!text) {
                alert('请输入待办事项');
                return;
            }
            
            const todo = {
                id: Date.now(),
                text: text,
                completed: false,
                createTime: new Date().toLocaleString('zh-CN')
            };
            
            todos.unshift(todo);
            input.value = '';
            renderTodos();
            showToast('添加成功');
        }
        
        function toggleTodo(id) {
            const todo = todos.find(t => t.id === id);
            if (todo) {
                todo.completed = !todo.completed;
                renderTodos();
            }
        }
        
        function deleteTodo(id) {
            if (confirm('确定要删除这个待办事项吗？')) {
                todos = todos.filter(t => t.id !== id);
                renderTodos();
                showToast('删除成功');
            }
        }
        
        function renderTodos() {
            const pendingList = document.getElementById('pending-list');
            const completedList = document.getElementById('completed-list');
            const pendingTotal = document.getElementById('pending-total');
            const completedTotal = document.getElementById('completed-total');
            const pendingCount = document.getElementById('pending-count');
            const completedCount = document.getElementById('completed-count');
            
            const pendingTodos = todos.filter(t => !t.completed);
            const completedTodos = todos.filter(t => t.completed);
            
            pendingTotal.textContent = pendingTodos.length;
            completedTotal.textContent = completedTodos.length;
            pendingCount.textContent = pendingTodos.length;
            completedCount.textContent = completedTodos.length;
            
            // 渲染待完成事项
            if (pendingTodos.length === 0) {
                pendingList.innerHTML = `
                    <div class="empty">
                        <div class="empty-icon">📝</div>
                        <div>暂无待办事项</div>
                    </div>
                `;
            } else {
                pendingList.innerHTML = pendingTodos.map(todo => `
                    <div class="todo-item">
                        <div class="todo-checkbox" onclick="toggleTodo(${todo.id})"></div>
                        <div style="flex: 1;">
                            <div class="todo-text">${todo.text}</div>
                            <div class="todo-time">${todo.createTime}</div>
                        </div>
                        <button class="btn btn-danger" onclick="deleteTodo(${todo.id})">删除</button>
                    </div>
                `).join('');
            }
            
            // 渲染已完成事项
            if (completedTodos.length === 0) {
                completedList.innerHTML = `
                    <div class="empty">
                        <div class="empty-icon">✅</div>
                        <div>暂无已完成事项</div>
                    </div>
                `;
            } else {
                completedList.innerHTML = completedTodos.map(todo => `
                    <div class="todo-item">
                        <div class="todo-checkbox checked" onclick="toggleTodo(${todo.id})">✓</div>
                        <div style="flex: 1;">
                            <div class="todo-text completed">${todo.text}</div>
                            <div class="todo-time">${todo.createTime}</div>
                        </div>
                        <button class="btn btn-danger" onclick="deleteTodo(${todo.id})">删除</button>
                    </div>
                `).join('');
            }
        }
        
        // 记事本相关函数
        function showAddNoteModal() {
            editingNote = false;
            currentNote = null;
            document.getElementById('modal-title').textContent = '新建笔记';
            document.getElementById('note-title').value = '';
            document.getElementById('note-content').value = '';
            document.getElementById('char-count').textContent = '0';
            document.getElementById('note-modal').classList.add('active');
        }
        
        function showViewNoteModal(note) {
            currentNote = note;
            document.getElementById('view-title').textContent = note.title;
            document.getElementById('view-content').textContent = note.content;
            document.getElementById('view-create-time').textContent = note.createTime;
            
            const updateTimeDiv = document.getElementById('view-update-time');
            if (note.updateTime !== note.createTime) {
                updateTimeDiv.style.display = 'block';
                updateTimeDiv.querySelector('span').textContent = note.updateTime;
            } else {
                updateTimeDiv.style.display = 'none';
            }
            
            document.getElementById('view-modal').classList.add('active');
        }
        
        function editCurrentNote() {
            closeViewModal();
            editingNote = true;
            document.getElementById('modal-title').textContent = '编辑笔记';
            document.getElementById('note-title').value = currentNote.title;
            document.getElementById('note-content').value = currentNote.content;
            document.getElementById('char-count').textContent = currentNote.content.length;
            document.getElementById('note-modal').classList.add('active');
        }
        
        function closeNoteModal() {
            document.getElementById('note-modal').classList.remove('active');
        }
        
        function closeViewModal() {
            document.getElementById('view-modal').classList.remove('active');
        }
        
        function saveNote() {
            const title = document.getElementById('note-title').value.trim();
            const content = document.getElementById('note-content').value.trim();
            
            if (!title) {
                alert('请输入标题');
                return;
            }
            
            if (!content) {
                alert('请输入内容');
                return;
            }
            
            const now = new Date().toLocaleString('zh-CN');
            
            if (editingNote && currentNote) {
                // 编辑模式
                currentNote.title = title;
                currentNote.content = content;
                currentNote.updateTime = now;
                showToast('更新成功');
            } else {
                // 新建模式
                const newNote = {
                    id: Date.now(),
                    title: title,
                    content: content,
                    createTime: now,
                    updateTime: now
                };
                notes.unshift(newNote);
                showToast('创建成功');
            }
            
            closeNoteModal();
            renderNotes();
        }
        
        function editNote(note) {
            event.stopPropagation();
            editingNote = true;
            currentNote = note;
            document.getElementById('modal-title').textContent = '编辑笔记';
            document.getElementById('note-title').value = note.title;
            document.getElementById('note-content').value = note.content;
            document.getElementById('char-count').textContent = note.content.length;
            document.getElementById('note-modal').classList.add('active');
        }
        
        function deleteNote(id) {
            event.stopPropagation();
            if (confirm('确定要删除这个笔记吗？删除后无法恢复。')) {
                notes = notes.filter(n => n.id !== id);
                renderNotes();
                showToast('删除成功');
            }
        }
        
        function searchNotes() {
            const searchText = document.getElementById('search-input').value.toLowerCase();
            renderNotes(searchText);
        }
        
        function renderNotes(searchText = '') {
            const notesList = document.getElementById('notes-list');
            const notesTotal = document.getElementById('notes-total');
            
            let filteredNotes = notes;
            if (searchText) {
                filteredNotes = notes.filter(note => 
                    note.title.toLowerCase().includes(searchText) ||
                    note.content.toLowerCase().includes(searchText)
                );
            }
            
            notesTotal.textContent = filteredNotes.length;
            
            if (filteredNotes.length === 0) {
                const message = searchText ? '没有找到相关笔记' : '还没有笔记，点击上方按钮创建第一个笔记吧';
                const icon = searchText ? '🔍' : '📓';
                notesList.innerHTML = `
                    <div class="empty">
                        <div class="empty-icon">${icon}</div>
                        <div>${message}</div>
                    </div>
                `;
            } else {
                notesList.innerHTML = filteredNotes.map(note => {
                    const preview = note.content.length > 100 ? 
                        note.content.substring(0, 100) + '...' : 
                        note.content;
                    
                    return `
                        <div class="note-item" onclick='showViewNoteModal(${JSON.stringify(note).replace(/"/g, "&quot;")})'>
                            <div class="note-title">${note.title}</div>
                            <div class="note-preview">${preview}</div>
                            <div class="note-time">创建时间: ${note.createTime}</div>
                            <div class="note-actions">
                                <button class="btn btn-small" onclick="editNote(${JSON.stringify(note).replace(/"/g, "&quot;")})">编辑</button>
                                <button class="btn btn-danger" onclick="deleteNote(${note.id})">删除</button>
                            </div>
                        </div>
                    `;
                }).join('');
            }
        }
        
        function showToast(message) {
            // 简单的提示实现
            const toast = document.createElement('div');
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0,0,0,0.8);
                color: white;
                padding: 15px 25px;
                border-radius: 8px;
                z-index: 2000;
                font-size: 16px;
            `;
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 2000);
        }
    </script>
</body>
</html>